<template>
    <div
        ref="videoWrapper"
        class="video-wrapper"
        @click.stop="showBtns"
    >
        <div
            class="video-btns"
            v-show="isShowBtns"
        >
            <div
                v-show="isFullScreen"
                @click="isFullScreen=false"
                class="back-btn"
            >
                <img
                    src="@/assets/video-back.png"
                    alt=""
                >
            </div>
            <div class="play-btn-large">
                <img src="@/assets/play-large.png">
            </div>
            <div class="play-bar"></div>
            <div class="pause-btn">
                <img
                    src="@/assets/pause.png"
                    alt=""
                >
            </div>
            <div class="full-btn">
                <img
                    src="@/assets/full.png"
                    @click="isFullScreen=!isFullScreen"
                >
            </div>
        </div>
    </div>
</template>

<script>

export default {
    components: {},
    props: {},
    data() {
        return {
            isFullScreen: false,
            isShowBtns: false,
            onChangeFullScreen: null
        };
    },
    mounted() {
        this.onChangeFullScreen = () => {
            const { isFullScreen } = this
            const videoWrapper = this.$refs.videoWrapper
            let cssText = ''
            if (isFullScreen) {
                const w = window.innerWidth
                const h = window.innerHeight
                const longSide = Math.max(w, h)
                const shortSide = Math.min(w, h)
                cssText = `
                position:fixed;
                left:0;
                top:0;
                width: ${longSide}px;
                height: ${shortSide}px;`;

                //通过查询媒体查询判断横竖屏状态
                const mediaQueryList = window.matchMedia('screen and (orientation: portrait)')
                const isPortrait = mediaQueryList.matches //是否为竖屏
                //竖屏则进行旋转
                if (isPortrait) cssText += `transform:rotate(90deg) translate(0,-100%);transform-origin:left top;`
            }
            videoWrapper.style.cssText = cssText
        }
        window.addEventListener('resize', this.onChangeFullScreen, false)
    },
    methods: {
        showBtns() {
            this.isShowBtns = true
            if (this.timer) clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                this.isShowBtns = false
            }, 3000);
        },
    },
    watch: {
        isFullScreen() {
            this.onChangeFullScreen()
        }
    },
    beforeDestory() {
        clearTimeout(this.timer)
        window.removeEventListener('resize', this.onChangeFullScreen)
    }
}
</script>

<style scoped>
.video-wrapper {
    position: relative;
    width: 100%;
    min-height: 200px;
    background-color: #0ff;
    transition: all 0.3s;
}
.video-btns {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}
.play-btn-large {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 20%;
    min-width: 50px;
    max-width: 100px;
}
.play-bar {
    width: 94%;
    height: 1.5%;
    background-color: #fff;
    position: absolute;
    bottom: 4.5%;
    left: 3%;
}
.full-btn,
.back-btn,
.pause-btn {
    width: 5%;
    max-width: 30px;
    min-width: 20px;
    position: absolute;
}
.full-btn {
    bottom: 10%;
    right: 3%;
}
.pause-btn {
    bottom: 10%;
    left: 3%;
}
.back-btn {
    width: 8%;
    max-width: 40px;
    min-width: 30px;
    top: 5%;
    left: 3%;
}
img {
    width: 100%;
}
</style>


